<template>
    <Card>
        <Row>
            <Button type="dashed"  @click="handleAdd" icon="md-add">添加扩展配置</Button>
            <Button type="dashed"  style="margin-left: 10px" @click="handleRemoveAll()" icon="md-remove">清空配置</Button>
        </Row>

        <div class="extConfig">
            <FormItem
                    prop="ext_config"
                    v-for="(item, index) in formDynamic.items"
                    v-if="item.status"
            >
                <Row style="margin-top: 2px">
                    <Input style="width: 123px" type="text" v-model="item.key" placeholder="Enter Key"></Input>
                    <Input style="width: 123px; margin-left: 10px" type="text" v-model="item.value" placeholder="Enter Value"></Input>
                    <Button style="margin-left: 10px" @click="handleRemove(index)">删除</Button>
                </Row>
            </FormItem>
        </div>
    </Card>
</template>
<script>
    export default {
        name   : 'jsonConfigKeyValue',
        data() {
            return {
                index: 0,
                formDynamic: {items: []},
            }
        },
        props  : {
            jsonData: {
                type: String,
                default: ''
            }
        },
        watch  : {
        },
        methods: {
            handleAdd () {
                this.index++;
                this.formDynamic.items.push({
                    key: '',
                    value: '',
                    status: 1
                });
            },
            handleRemove (index) {
                this.index--;
                this.formDynamic.items[index].status = 0;
            },
            handleRemoveAll() {
                this.index = 0;
                this.formDynamic.items = [];
            },
            /**
             * 转换成Json字符串
             * @returns {string}
             */
            createExtConfigJson() {
                let extConfig = {};
                for (let objKey in this.formDynamic.items) {
                    if (this.formDynamic.items[objKey].key && this.formDynamic.items[objKey].status === 1) {
                        if (this.formDynamic.items[objKey].value !== '') {
                            //判断value是否为json
                            let type = typeof JSON.parse(this.formDynamic.items[objKey].value);
                            if (type === 'object') {
                                extConfig[this.formDynamic.items[objKey].key] = JSON.parse(this.formDynamic.items[objKey].value)
                            } else {
                                extConfig[this.formDynamic.items[objKey].key] = this.formDynamic.items[objKey].value
                            }
                        }
                    }
                }
                return JSON.stringify(extConfig);
            },
        },
        created() {
            //处理扩展字段
            if(this.jsonData){
                let extObj = JSON.parse(this.jsonData);
                for(let objKey in extObj){
                    this.index++;
                    this.formDynamic.items.push({
                        key: objKey,
                        value: extObj[objKey],
                        status: 1
                    });
                }
            }
        }
    }
</script>
<style>
</style>